import React from 'react'
import { View, Text, Button } from '@tarojs/components'
import { Types } from '../../services/voucher/type'
import './voucher-card.scss'

type Props = {
  data: Types.BaseCoupons;
  onClick?: () => void;
};


export default function ({ data, onClick }: Props) {
  return <View className='f-r j-between theme-card voucher-card'>
    {/* 左边展示区域 */}
    <View className="cnpc-bg" style={{
      backgroundImage: `url(${data.imgUrl})`
    }}>
      <View className="cnpc-bottom">
        <View className="cnpc-logo"></View>
        <Text className="t-10px">中石油</Text>
      </View>
    </View>
    {/* 中间详情 */}
    <View className="card-detail">
      <View>{data.title}</View>
      <Text className="small">仅限{data.province}境内使用</Text>
    </View>
    {/* 按钮 */}
    <View
      className="card-button theme-btn"
      onClick={() => {
        onClick && onClick();
      }}
    >
      <Text>立即抢购</Text>
    </View>
  </View>
}